<template>
	<cusUiNavVue :title="toInfo.name"></cusUiNavVue>
	<scroll-view class="message-list" :scroll-into-view="bottomId">
		<view :class="['message-item', item.fromId===meId?'right': '']" v-for="item in messageList">
			<image v-if="item.fromId!==meId" class="message-avatar" :src="toInfo.avatar" mode=""></image>
			<view class="message-content">
				<rich-text :nodes="item.message"></rich-text>
			</view>
			<image v-if="item.fromId===meId" class="message-avatar" :src="myInfo.avatar" mode=""></image>
		</view>
		<view id="bottom-item"></view>
	</scroll-view>
	<view class="footer">
		<view class="send-model">
			<up-input placeholder="请输入内容" border="surround" v-model="message"></up-input>
			<button size="mini" @click="doSend">发送</button>
			<up-icon @click="showIcon" name="photo" color="#2979ff" size="28"></up-icon>
			<up-icon @click="selctImg" name="camera" color="#2979ff" size="28"></up-icon>
		</view>
		<view v-if="isShowIcon" class="icon-list">
			<image @click="selectedIcon(item)" class="icon-image" v-for="item in iconList" :src="item.iconUrl" mode=""></image>
		</view>
	</view>
	<cusTabVue></cusTabVue>
</template>


<script setup>
	import cusUiNavVue from '@/components/cus-uinav/cus-uinav.vue'
	import cusTabVue from '../../components/cus-tab/cus-tab.vue';
	import io from '@hyoga/uni-socket.io';
	import {
		nextTick,
		ref,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const bottomId = ref('')
	const meId = ref('')
	const toId = ref('')
	const toInfo = ref({})
	const myInfo = ref({})
	const message = ref('')
	onLoad((options) => {
		meId.value = options.meId
		toId.value = options.toId
		getUserInfo()
		linkSocket()
	})
	let timer
	const doHeart = () => {
		timer && clearInterval(timer)
		timer = setInterval(() => {
			socket.emit('ping')
		}, 10000)
	}
	
	let socket
	// 封装链接websocket服务的方法
	const linkSocket = () => {
		socket = io('ws://localhost:3000', {
			path: '/websocket',
			query: {
				id: meId.value
			},
			transports: ['websocket', 'polling'],
			timeout: 5000,
		});
		socket.on('connect', () => {
			console.log('客户端链接服务端陈工')
			doHeart()
			socket.on('pang', () => {
				console.log('一次心跳检测')
			})
			socket.on('receiveMsg', info => {
				messageList.value.push(info)
				uni.setStorageSync('messageList', messageList.value)
			})
		})
	}
	const getUserInfo = () => {
		uniCloud.callFunction({
			name: 'getPersonDetail',
			data: {
				id: toId.value
			},
			success(res) {
				if (res.result.data.length > 0) {
					toInfo.value = res.result.data[0]
				} else {
					uni.showToast({
						title: '暂未找到对方人员信息'
					})
				}
			}
		})
		uniCloud.callFunction({
			name: 'getPersonDetail',
			data: {
				id: meId.value
			},
			success(res) {
				console.log(res)
				if (res.result.data.length > 0) {
					myInfo.value = res.result.data[0]
				} else {
					uni.showToast({
						title: '暂未找到己方人员信息'
					})
				}
			}
		})
	}
	const messageData = uni.getStorageSync('messageList')
	const messageList = ref([])
	messageList.value = messageData || []
	const doSend = async () => {
		const messageObj = {
			fromId: meId.value,
			toId: toId.value,
			message: codeStrToImgStr(message.value)
		}
		messageList.value.push(messageObj)
		socket.emit('sendMsg', messageObj)
		uni.setStorageSync('messageList', messageList.value)
		message.value = ''
	}
	const isShowIcon = ref(false)
	const iconList = ref([
		{iconUrl: '/static/icon/bs.png', code: '/bs'},
		{iconUrl: '/static/icon/cj.png', code: '/cj'},
		{iconUrl: '/static/icon/eye.png', code: '/eye'},
		{iconUrl: '/static/icon/sq.png', code: '/sq'},
		{iconUrl: '/static/icon/yg.png', code: '/yg'}
	])
	//  控制表情展示与否
	const showIcon = () => {
		isShowIcon.value = !isShowIcon.value
	}
	// 选择表情
	const selectedIcon = icon => {
		message.value += icon.code
	}
	// 表情code转换成图片的方法
	const codeStrToImgStr = (str) => {
		// /bs
		let newStr = str
		iconList.value.forEach(item => {
			newStr = newStr.replaceAll(item.code, `<img style="width:50px;height:50px;" src="${item.iconUrl}">`)
		})
		return newStr
	}
	// 选择图片
	const selctImg = () => {
		uni.chooseImage({
			success(res) {
				console.log(res)
				const url = res.tempFilePaths[0]
				const messageObj = {
					fromId: meId.value,
					toId: toId.value,
					message: `<img width="100" src="${url}">`
				}
				messageList.value.push(messageObj)
				uni.setStorageSync('messageList', messageList.value)
				socket.emit('sendMsg', messageObj)
			}
		})
	}
	watch(messageList.value, () => {
		nextTick(() => {
			bottomId.value = 'bottom-item'
		})
	})
</script>

<style lang="scss" scoped>
	.message-list {
		padding-top: 88rpx;
		padding-bottom: 120rpx;
	}

	.message-item {
		display: flex;
		margin-bottom: 20rpx;
		.message-avatar {
			width: 80rpx;
			height: 80rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		&.right {
			justify-content: flex-end;
			.message-avatar {
				margin-left: 20rpx;
			}
		}
		.message-content{
			max-width: 70%;
			background: #87c1ed;
			padding: 20rpx;
			border-radius: 6rpx;
		}
	}

	.footer {
		background: #fff;
		position: fixed;
		bottom: 100rpx;
		padding: 10rpx;
		width: 100vw;
		box-sizing: border-box;

		.send-model {
			display: flex;
		}
	}
	.icon-list{
		.icon-image{
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>